<template>
  <main>
    <div  id="myDynamic" v-for="(item,index) in dynamics">
      <div style="box-sizing: border-box;padding:10px"  >
        <header>
          <div id="avatar">
            <img v-if="" src="../../../src/assets/img/tab1.jpg" alt="">
          </div>
          <div id="user">
            <div style="display: flex;flex-direction: column;justify-content: space-around">
              <h3>{{item.userName}}</h3>
              <p>{{item.update}}</p>
            </div>

            <div style="display: flex;justify-content: flex-end;width: 40%">
              <i style="cursor:pointer;" class="el-icon-arrow-down"></i>
            </div>

          </div>
        </header>
        <article>
          <div id="blank">

          </div>
          <div>
            <p>{{item.content}}</p>
            <img v-if="item.img" style="height: 200px" :src="item.img" alt="">
          </div>

        </article>
      </div>
      <footer>
        <div class="fBtn"><i class="el-icon-star-off"> </i> {{item.Favorites}}</div>
        <div class="fBtn"><i class="el-icon-s-comment"> </i> {{item.comment}}</div>
        <div class="fBtn"><i class="el-icon-s-opportunity"> </i> {{item.like}}</div>
      </footer>
    </div>
    <el-button style="width: 60%" v-if="!loading" @click="load">查看更多</el-button>
    <div id="more" v-if="loading" >
      <i class="el-icon-loading"></i>
      <span>正在拼了老命加载...</span>
    </div>

  </main>
</template>

<script>
import Aside from "../../components/content/Aside";
import {addDynamic,getConcerDynamic} from "../../network/dynamic"
export default {
  name: "myDynamic",
  components: {Aside},
  data(){
    return{
      dynamic:'',
      loading:false,
      dynamics:[
        {userName:'美食家的厨房', Favorites:234,like:266, comment:122,
          content:'巧克力的古早味蛋糕，你看，是不是特好看巧克力的古早味蛋糕，你看，是不是特好看巧克力的古早味蛋糕，你看，是不是特好看',
          img:require("../../assets/img/tab2.jpg"),update:'2020/2/16'},
        {userName:'美食家的厨房', Favorites:234,like:266, comment:122,
          content:'巧克力的古早味蛋糕，你看，是不是特好看巧克力的古早味蛋糕，你看，是不是特好看巧克力的古早味蛋糕，你看，是不是特好看',
          img:null,update:'2020/2/16'},
        {userName:'美食家的厨房', Favorites:234,like:266, comment:122,
          content:'巧克力的古早味蛋糕，你看，是不是特好看巧克力的古早味蛋糕，你看，是不是特好看巧克力的古早味蛋糕，你看，是不是特好看',
          img:require("../../assets/img/tab2.jpg"),update:'2020/2/16'},
        {userName:'美食家的厨房', Favorites:234,like:266, comment:122,
          content:'巧克力的古早味蛋糕，你看，是不是特好看巧克力的古早味蛋糕，你大王大大青蛙打网球我的青蛙打网球的武器无穷大无穷大完全看，是不是特好看巧克力的古早味蛋糕，你看，是不是特好看',
          img:require("../../assets/img/tab2.jpg"),update:'2020/2/16'},
      ]
    }
  },
  created() {
    this.getData()
  },
  methods:{
    // 滚动操作
    getData(){
      getConcerDynamic(1)
          .then(res=>{
            console.log(res)
            this.dynamics=res.data.extend.
          })
    },
    addDy(){
      addDynamic(this.dynamic)
      .then(res=>{
        console.log(res)
      })
    },
    load(){
      this.loading=true
      setTimeout(()=>{
        this.dynamics.push( {userName:'美食家的厨房', Favorites:234,like:266, comment:122,
          content:'巧克力的古早味蛋糕，你看，是不是特好看巧克力的古早味蛋糕，你大王大大青蛙打网球我的青蛙打网球的武器无穷大无穷大完全看，是不是特好看巧克力的古早味蛋糕，你看，是不是特好看',
          img:require("../../assets/img/tab2.jpg"),update:'2020/2/16'})
        this.loading=false
      },2000)

    }
  }
}
</script>

<style scoped>
main{

  width: 70%;
  /*height: 2000px;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #69c5f5;
}
#myDynamic{
  margin: 20px;
  width: 60%;
  box-shadow: 0 0px 5px grey;
  background-color: #fff;
}
header{
  height: 70px;
  width: 100%;
  display: flex;

}
#avatar{
  height:100%;
  width: 11%;
  /*border-radius: 50%;*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*background-color: #000;*/
}
#avatar img{
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
#user{
  color: rgb(51,51,51);
  width: 89%;
  height: 100%;
  display: flex;
  justify-content:space-between;
}
#user h3:hover{
  color: red;
  cursor: pointer;
}
#user *{
  padding: 0;
  margin: 0;
}
#user p{
  font-size: 13px;
}
article{
  display: flex;
}
#blank{
  display: flex;
  width: 115px;
  /*background-color: #000;*/
}
footer{
  height: 35px;
  width: 100%;
  border-top: 1px solid #e7d7d7;
  display: flex;
  justify-content: space-between;
}
.fBtn{
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(128,128,128);
  font-size: 15px;
}
.fBtn i{
  font-size: 18px;
}
#more{

}
#more span{
  font-size: small;
}
</style>